import {Table, Divider, Card, Button, Icon, Form, Row, Col, Input, Select} from 'antd';
import React from "react"
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import router from 'umi/router';
import styles from "./TableList.less";
import Detail from "./Detail";

const FormItem = Form.Item;

function mapStateToProps(state) {
  return {
    list: state.goods.list
  };
}

@connect(mapStateToProps)
@Form.create()
class TableList extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      data: [],
      total: 0,
      current: 1,
      visable: false
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'goods/fetch',
    }).then(()=>{

      const { list } = this.props;

      if(list.errno === 0){
        this.setState({
          total: list.data.total,
          data: list.data.data
        });
      }else {
        this.props.msg = list.msg;
      }

    });
  }

  changePage = ( page )=> {
    this.setState({
      current: page
    });

    const { dispatch } = this.props;
    dispatch({
      type: 'goods/fetch',
      payload:{
        page: page
      }
    }).then(()=>{

      const { list } = this.props;

      if(list.errno === 0){
        this.setState({
          total: list.data.total,
          data: list.data.data
        });
      }else {
        this.props.msg = list.msg;
      }

    });

  };


  checkDetail = (id)=>{
    this.child.showDrawer(id)
  };

  onRef = (ref)=>{
    this.child = ref
  };

  goodsAdd = ()=>{
    router.push('/goods/add');
  };

  renderSimpleForm() {
        const {
            form: { getFieldDecorator },
        } = this.props;
        return (
          <Form onSubmit={this.handleSearch} layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={8} sm={24}>
                <FormItem label="规则名称">
                  {getFieldDecorator('name')(<Input placeholder="请输入" style={{width: 200}} />)}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <FormItem label="使用状态">
                  {getFieldDecorator('status')(
                    <Select placeholder="请选择" style={{ width: 200 }}>
                      <option value="0">关闭</option>
                      <option value="1">运行中</option>
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
                <span className={styles.submitButtons}>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                  <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                    重置
                  </Button>
                  <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                    展开 <Icon type="down" />
                  </a>
                </span>
              </Col>
            </Row>
          </Form>
        );
  };

  render(){

    const columns = [{
      title: 'ID',
      dataIndex: 'id',
    }, {
      title: '商品名称',
      dataIndex: 'name',
      width: 250,
    }, {
      title: '缩略图',
      dataIndex: 'thumb',
      render: (text) => <img src={text} style={{width: 80}} alt="" />
    }, {
      title: '剩余库存',
      dataIndex: 'stock_num',
    }, {
      title: '销量',
      dataIndex: 'sale_num',
    }, {
      title: '地区',
      dataIndex: 'area',
    }, {
      title: '店铺',
      dataIndex: 'store',
    }, {
      title: '商品编码',
      dataIndex: 'sn',
    }, {
      title: '供应商',
      dataIndex: 'supplier',
    }, {
      title: '操作',
      key: 'action',
      render: (text, record, index) => (<div><a href="">编辑</a><Divider type="vertical" /><a onClick={()=>this.checkDetail(record.id)}>查看</a></div>),
    }
    ];

    return (
        <div>
          <PageHeaderWrapper title="">
            <Card>
              <div>
                {this.renderSimpleForm()}
              </div>
              <div className={styles.bars}>
                <Button icon="plus" type="primary" onClick={this.goodsAdd}>新建</Button>
              </div>
              <div>
                <Table columns={columns} dataSource={this.state.data} pagination={{  // 分页
                    current: this.state.current,
                    total: this.state.total,
                    onChange: this.changePage,
                  }}
                />
              </div>
            </Card>
          </PageHeaderWrapper>
          <Detail onRef={this.onRef} visable={this.state.visable} />
        </div>
      );
    }

}

export default TableList;
